<script>
import {defineComponent} from 'vue'
import UserAvatar from "@/components/UserAvatar.vue";

export default defineComponent({
  name: "UserAvatarName",
  components: {UserAvatar},
  props: {
    user: {
      userId: Number,
      uname: String,
      imgUrl: String,
      self: Boolean
    }
  }
})
</script>

<template>
  <div class="user-avatar-name-container-div">
    <div class="user-avatar-div">
      <UserAvatar
        :user="user"
        />
    </div>
    <div class="user-name-div">
      <span>{{user.uname}}</span>
    </div>
  </div>
</template>

<style scoped lang="less">
@import "@/assets/style/less/all.less";
.user-avatar-name-container-div {
  display: flex;
  flex-direction: row;
  align-items: center;
  .user-avatar-div{
    .flex-item-fix();
  }
  .user-name-div{
    .flex-item-fit-width();
    margin-left: 8px;
  }
}
</style>